<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component, lazy, Suspense } = React;
      const { NavLink, Route, BrowserRouter } = ReactRouterDOM;
      const About = lazy(() => <script type="module" src="./about.js" />);
      const Home = lazy(() => <script type="module" src="./home.js" />);
      // const Home = lazy(() => import("./home.js"));
      // const About = lazy(() => import("./about.js"));
      class Demo extends Component {
        render() {
          return (
            <div className="container">
              <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                  <div className="page-header">
                    <h2>React Router Demo</h2>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                  <div className="list-group">
                    {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
                    <NavLink className="list-group-item" to="/about">
                      About
                    </NavLink>
                    <NavLink className="list-group-item" to="/home">
                      Home
                    </NavLink>
                  </div>
                </div>
                <div className="col-xs-6">
                  <div className="panel">
                    <div className="panel-body">
                      {/* 注册路由 */}
                      <Suspense fallback={<div>loading....</div>}>
                        <Route path="/about" component={About} />
                        <Route path="/home" component={Home} />
                      </Suspense>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        }
      }

      let vdom = (
        <div>
          <Demo></Demo>
        </div>
      );
      ReactDOM.render(
        <BrowserRouter>{vdom}</BrowserRouter>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
